<template>
  <div class="finance app-container">
    <el-card class="box-card" style="margin-bottom: 10px;">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :lg="4">
          <el-input v-model="params.search"
                    placeholder="请输入订单号"
                    clearable
                    size="default">
          </el-input>
        </el-col>

        <el-col :xs="24" :sm="12" :lg="8">
          <el-date-picker
            v-model="params.date_time"
            type="datetimerange"
            start-placeholder="收入开始时间"
            end-placeholder="收入结束日期"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
            size="default"/>
        </el-col>

        <el-col :xs="24" :sm="12" :lg="4">
          <el-button size="default" type="primary" icon="Search" @click="handleQuery">查询</el-button>
          <el-button size="default" @click="handleResetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table v-loading="loading" :data="pageData">
        <el-table-column label="ID" prop="id"/>
        <el-table-column label="状态">
          <template #default="{row}">
            <el-tag type="warning" v-if="row.status === 'freeze'">冻结中</el-tag>
            <el-tag type="success"  v-else-if="row.status === 'normal'">已到账</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单号" prop="code"/>
        <el-table-column label="所属商户">
          <template #default="{row}">
            <div>ID：{{row.merchant?.id || '-'}}</div>
            <div>名称：{{row.merchant?.name || "-"}}</div>
          </template>
        </el-table-column>
        <el-table-column label="收入金额">
          <template #default="{row}">
            <span class="amount">￥{{row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="created_at"/>
      </el-table>
    </el-card>

    <pagination
      v-if="total > 0"
      v-model:total="total"
      v-model:page="params.page"
      v-model:limit="params.size"
      @pagination="handleQuery"
    />
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import FinanceAPI, {financePageQuery} from "@/api/finance/finance";

const params = reactive<financePageQuery>({
  search: "",
  status: "freeze",
  page: 1,
  size: 10
})
const total = ref(0);
const loading = ref(false);
const pageData = ref([]);

function handleResetQuery() {
  params.status = "";
  params.search = "";
  params.page = 1;
  handleQuery();
}

function handleQuery() {
  loading.value = true;
  FinanceAPI.getPage(params).then((res: any) => {
    pageData.value = res.records;
    total.value = res.total_page;
    loading.value = false;
  })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  handleQuery();
})
</script>

<style scoped lang="scss">
.finance{
  font-size: 14px;

  .amount{
    color: #ff0000;
    font-size: 14px;
  }
}
</style>
